<template>
    <div>
      <div class="ba-operate-form">
        <el-form :model="value" @keyup.enter.native="getDataList()" label-width="70px">
          <el-row :gutter="20">
            <el-collapse-transition>
              <div v-show="advanced">
                <search
                  v-model="value"
                  :formList="formList"
                  @getDataList="getDataList"
                  @getReset="getReset"
                />
              </div>
            </el-collapse-transition>
          </el-row>
        </el-form>
      </div>
      <c-form 
        v-model="value"
        :showScreen="showScreen"
        :table-column="tableColumn"
        @check-change="checkChange"
        @changeAdvance="changeAdvance"
      >
        <slot></slot>
      </c-form>
    </div>
</template>

<script>
import search from './components/wcs-search'
import cForm from './components/c-form'
  export default {
    components: { cForm, search },
    props: {
      value: {
        type: Object,
        default: () => {}
      },
      tableColumn: {
        type: Array,
        default: () => []
      },
      advanced: {
        type: Boolean,
        default: false
      },
      showScreen: {
        type: Boolean,
        default: true
      },
      formList: {
        type: Array,
        default: () => []
      }
    },
    computed: {
      // 过滤有操作栏时的筛选下拉项
      dropList() {
        return this.tableColumn.filter(item => item.prop)
      }
    },
    data() {
      return {
      }
    },
    methods: {
      checkChange(val) {
        this.$emit('check-change', val)
      },
       // 高级搜索切换
      changeAdvance() {
        this.$emit('changeAdvance')
      },
      getDataList() {
        this.$emit('getDataList')
      },
      getReset() {
        this.$emit('getReset')
      },
    },
  }
</script>

<style scoped>
  .senior {
    float: right;
  }
</style>